import React, { useEffect, useState, useRef } from 'react'
import { NavBar, Space, Toast, Button } from 'antd-mobile'
import { CloseOutline, MoreOutline, SearchOutline, RightOutline } from 'antd-mobile-icons'
import PaymentCountdown from '../../component/CountDownWapper/CountDownWapper'
import { useSearchParams, useLocation, useNavigate } from 'react-router-dom'
import axios from 'axios'
import '../../static/Pending/Pending.css'
import { ESModulesRunner } from 'vite/runtime'
axios.defaults.baseURL = 'http://127.0.0.1:3000'
export default function Pending() {
    const deadline = 3600;
    const [list, setList] = useState([])
    const [time, setTime] = useState(9)
    const [num, setNum] = useState('')
    const [price, setPrice] = useState('')
    const [co_id, setCo_id] = useState('')
    const [title, setTitle] = useState('')
    const [params] = useSearchParams()
    const navigate = useNavigate()
    let id = params.get('id')
    const back = () =>
        Toast.show({
            content: '点击了返回区域',
            duration: 1000,
        })
    const getList = async () => {
        await axios.get(`/OrderRouter/OrderList?id=${id}`).then(res => {
            setList(res.data.list)
            setTime(res.data.endTime)
            setNum(res.data.num)
            setCo_id(res.data.or_id)
            setPrice(res.data.price)
            setTitle(res.data.title)
        })
    }
    const handleClick = async () => {
        await axios.post(`/OrderRouter/payment?orderId=${id}&title=${title}&price=${price}`).then(res => {
            window.location.href = res.data.resp
        })
    }
    useEffect(() => {
        getList()
    }, [])
    return (
        <div className='pending_box'>
            <div style={{ marginTop: '3rem', color: 'white' }}>
                <NavBar onBack={back}>订单详情</NavBar>
            </div>
            <div className='pending_title'>
                <div>
                    <h1> 待支付<RightOutline /></h1>
                </div>
            </div>
            <div className='pending_span'><span>库存有限，请尽快完成支付，过期将自动取消</span></div>
            <div className="pending_main">
                <div className='pending_abs'>
                    <div className='abs_title'>
                        <div style={{ display: "flex" }}>
                            <img src="/img/对号-copy.png" alt="" width='20px' height='20px' />
                            <span>随买随用</span>
                        </div>
                        <div style={{ display: "flex" }}>
                            <img src="/img/对号-copy.png" alt="" width='20px' height='20px' />
                            <span>随时退</span>
                        </div>
                        <div style={{ display: "flex" }}>
                            <img src="/img/对号-copy.png" alt="" width='20px' height='20px' />
                            <span>过期退</span>
                        </div>
                    </div>
                    <div className='pending_time'>
                        <span>剩余时间：</span>
                        <span><PaymentCountdown deadline={time} id={id} /></span>
                    </div>
                    <div className='pending_button'>
                        <Button style={{ width: '10rem', border: '5px block solid' }} onClick={() => navigate(`/cancel?id=${id}`)}>取消订单</Button>
                        <Button color='primary' style={{ marginLeft: "2rem", width: '10rem' }} onClick={() => handleClick()} >去支付</Button>
                    </div>
                </div>
                <div className='pending_price'>
                    <div className='pending_order'>
                        <span style={{ marginTop: '2rem' }}><b>在线支付 ：</b> <span style={{ color: "red", fontSize: '2.1rem' }} >{price}</span></span>
                        <span style={{ marginTop: '2rem', color: 'blue' }} >费用明细</span>
                    </div>
                    <div className='pending_or'>
                        <span>订单号 {co_id}</span>
                    </div>
                </div>
            </div>
        </div>
    )
}
